<template>
<div>
  <van-nav-bar title="订单"  :fixed="true" :placeholder="true" left-arrow @click-left="return1"></van-nav-bar>
  <div v-if="order.status==4"><img src="/static/没有收藏.png" style="width: 100%"><div style="text-align: center">订单已超时取消</div></div>
  <div v-if="!order"><img src="/static/没有收藏.png" style="width: 100%"><div style="text-align: center">订单不存在</div></div>
  <div style="height: calc(100vh - 96px);overflow-y: auto;overflow-x: hidden;background-color: #f6f6f6" v-if="order.status==0">
  <div style="position: relative">
  <van-contact-card style="height: auto"></van-contact-card>
    <div style="position: absolute;width: 100%;height: auto;left: 0;top: 0;background-color: white;padding: 10px">
      <div style="display: flex;align-items: center">
        <div>
          <div style="display: flex; align-items: center;">
            <div style="display: flex; margin-right: 10px" v-if="order.district==1"><van-tag type="danger" >默认</van-tag></div>
            <div>{{order.recipientName}} {{order.phoneNumber}}</div>
          </div>
          <div style="font-weight: bold; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" :style="{width:icoWidth}">
            {{order.country}}{{order.city}}{{order.province}}{{order.streetAddress}}
          </div>
        </div>
        <div style="margin-left: auto" ref="ico">
          <van-icon name="arrow" @click="tiao"/>
        </div>
      </div>
    </div>
  </div>

  <div style="margin-top: 10px;background-color: white;">
    <van-card :num="order.num" :thumb="order.itemImages?order.itemImages.split(';')[0]:''">
      <template #desc>
        <div>{{order.specification}}</div>
      </template>
      <template #price>
        <div style="font-size: 16px;color: red">￥{{order.price}}</div>
      </template>
      <template #title>
        <div style="white-space: nowrap;overflow: hidden; text-overflow: ellipsis">{{order.itemDescription}}</div>
      </template>
    </van-card>
  </div>
    <div style="margin-top: 10px;background-color: white;display: flex;padding: 10px">
      <div>商品金额</div>
      <div style="margin-left: auto;font-weight: bold">￥{{order.price*order.num}}</div>
    </div>
    <div style="background-color: white;display: flex;padding: 10px">
      <div>退换货免运费</div>
      <div style="margin-left: auto;font-weight: bold">￥0.00</div>
    </div>
    <div style="background-color: white;display: flex;padding: 10px">
      <div>运费</div>
      <div style="margin-left: auto;font-weight: bold">￥0.00</div>
    </div>
    <div style="background-color: white;display: flex;padding: 10px;border-top: 1px #eeeeee solid">
      <div></div>
      <div style="margin-left: auto;">合计：<span style="color: red;font-weight: bold">￥{{order.price*order.num}}</span></div>
    </div>
    <div style="margin-top: 10px;background-color: white;display: flex;padding: 10px">
      <div>支付方式</div>
      <div style="margin-left: auto;font-weight: bold">在线支付</div>
    </div>
  </div>
  <van-submit-bar :price="order.price*order.num*100" button-text="立即支付" @submit="onSubmit" text-align="left" v-if="order.status==0">
    <template #default>
      <div style="display:flex;align-items: center;color: white;padding: 1px;">
        <div style="text-align: center;align-items: center;font-size: 14px;border-radius: 30px 0 0 30px;border: 1px red solid;background-color: red">等待付款</div>
        <div style="display: flex;align-items: center;background-color: rgb(253,179,179);border: 1px rgba(253,179,179) solid;border-radius: 0px 30px 30px 0 "> <van-count-down style="color: white;padding: 0" :time="1800000-Math.floor((new Date().getTime() - new Date(order.createTime).getTime()))" /></div>
      </div>

    </template>
  </van-submit-bar>
</div>
</template>
<script>
import Vue from 'vue';
import {Dialog, SubmitBar, Toast} from 'vant';
import { ContactCard } from 'vant';
import { NavBar } from 'vant';
import { Tag } from 'vant';
import { Icon } from 'vant';
import { Card } from 'vant';
import { Stepper } from 'vant';
import request from "../../utils/request";
import { CountDown } from 'vant';

Vue.use(CountDown);
Vue.use(Stepper);
Vue.use(Card);
Vue.use(Icon);
Vue.use(Tag);
Vue.use(NavBar);
Vue.use(ContactCard);
Vue.use(SubmitBar);
export default {
  data(){
    return{
      i:this.$route.query.i,//detailId
      itemId:this.$route.query.itemId,
      order:{},
      icoWidth:'',
    }
  },
  mounted() {
    this.icoWidth = 'calc(100vw - 20px - '+this.$refs.ico.offsetWidth+'px)';
  },
  created() {
    this.getOrder()
  },
  methods:{
    onSubmit(){
      Dialog.confirm({
        title: '支付确认',
        message: '确认支付订单？',
      })
        .then(() => {
          this.order.orderId=this.$route.query.orderId
          request.post('/order/pay',this.order).then(resp=>{
            if (resp.code===0){
              this.$router.push({path:'/order',query:{active:0}})
              Toast('支付成功')
            }else {
              Toast(resp.errorMessage)
            }
          })
        })
        .catch(() => {
          // on cancel
        });
    },
    // 判断是否是购买返回的商品页面
    return1(){
      if (this.itemId){
        this.$router.push({path:'/productDetail',query:{i:this.i,itemId:this.itemId,price:this.$route.query.price}})
      }
    },
    tiao(){
        this.$router.push({path:'/address',query:{orderId:this.$route.query.orderId,i:this.i,itemId:this.itemId,addressId:this.order.addressId}})

    },
    getOrder(){
      request.post('/order/getOrder',{orderId:this.$route.query.orderId}).then(resp=>{
        if (resp.code===0){
          this.order=resp.data
        }
      })
    }
  }
}
</script>
<style scoped>
>>> .van-nav-bar .van-icon{
  color: black!important;
}
</style>
